<template>
	<view class="logo-container">
		<image
				src="https://ribotrade-oss.oss-cn-beijing.aliyuncs.com/2025/01/04f711ae1495ca4edb9bf948ff75a03ea8logo-width (1).png"
				class="logo-image"
				:style="{ transform: `scale(${scale})` }"
				mode="widthFix"
				@load="handleLoad"
		/>
	</view>
</template>

<script>
export default {
	name: "uni-logo",
	data() {
		return {
			scale: 3 // 初始放大3倍
		};
	},
	methods: {
		handleLoad() {
			// 加载完成后触发缩放动画
			setTimeout(() => {
				this.scale = 1;
			}, 50);
		}
	}
};
</script>

<style lang="scss" scoped>
.logo-container {
	padding-top: 8%;
	overflow: hidden; /* 防止放大时溢出 */
	border-radius: 20rpx;
	background-color: #ffffff;
}

.logo-image {
	width: 450rpx;
	transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1); /* 弹性动画曲线 */
	will-change: transform; /* 性能优化 */
	display: block;
	//margin: 0 auto;
}
</style>
